<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="nav">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    </el-breadcrumb>

  <el-row type="flex" justify="space-around" >
    <el-col :span="4">
      <div class="grid-content left">
          <div class="bm1">部门结构</div>
          <div class="tree">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
          
      </div>
    </el-col>

    <el-col :span="18">
      <div class="right">
        <el-row type="flex" justify="space-between">
          <el-col :span="10">
            <div class="bm_status" style="float: left;">
              <div class="bm_status1">状态</div>
              <div class="" style="float: left;">
                <el-select size="small" v-model="status_value" placeholder="选择" style="width: 72px; border: 1px solid rgb(0, 150, 136);">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>

            <!-- 搜索 -->
            <div style="float: left;">
              <div class="bm_status1 name">名称</div>
              <div  style="white-space: nowrap;">
                <el-input
                   placeholder="请输入部门名称"
                   v-model="bm_input"
                   clearable
                   size="small"
                   style="width: 160px;border: 1px solid rgb(0, 150, 136);"
                  >
                </el-input>
                <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 10px;background-color: rgb(0, 150, 136);" @click="search"></el-button>
              </div>
            </div>
            
      
          </el-col>
          <el-col :span="5">
            <div >
              <el-button type="primary" icon="el-icon-plus" size="small" style="margin-left: 10px;background-color: rgb(0, 150, 136);" @click="showAddDept">添加</el-button>
            <!-- 部门添加弹出框 -->
            <el-dialog  :visible.sync="dialogFormVisible" width="340px" @close="closeAddDept">
              <el-form :model="form" >
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                  
                  <el-input v-model="form.title" autocomplete="off" placeholder="请输入标题（必填）"></el-input>
                </el-form-item>
                <el-form-item label="父级部门" :label-width="formLabelWidth">
                  <el-popover placement="bottom-start" width="400" trigger="click">
                    <el-tree :data="data" :props="deptProps" accordion @node-click="handleNodeDeptPid">
                    </el-tree>
                    <el-button slot="reference" icon="el-icon-arrow-down">{{ deptName }} </el-button>
                  </el-popover>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-input v-model="form.sort" autocomplete="off" placeholder="请选择"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="form.remark"
                    >
                  </el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeAddDept">关闭</el-button>
                <el-button type="primary" @click="addDept">保存</el-button>
              </div>
            </el-dialog>

            <el-popover placement="top" width="150px" trigger="click">
              <div class="dialog-info">
                <el-button @click="enables">启用</el-button>
                <el-button @click="freezes" style="margin-left: 0;">冻结</el-button>
                <el-button @click="deletes" style="margin-left: 0;">删除</el-button>
              </div>
              <el-button slot="reference" size="small" style="background-color: #009688; color: aliceblue;" icon="el-icon-caret-bottom">操作</el-button>
            </el-popover>

            </div>
          </el-col>
        
        </el-row>
        
        <el-row style="margin-top: 10px;">
          <el-table
            row-key="id"
            ref="multipleTable"
            :data="tableData1"
            tooltip-effect="dark"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55"
              >             
            </el-table-column> 
            <el-table-column
              prop="title"
              label="名称" 
              align="center">
            </el-table-column>
            <el-table-column
              prop="sort"
              label="序号"
              width="180" align="center">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              show-overflow-tooltip align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : (scope.row.status == 2 ? 'primary' : 'danger')"
                disable-transitions>
                {{ scope.row.status === 1 ? "正常" : (scope.row.status === 2 ? "冻结" : "删除") }}
              </el-tag>
              </template>
            </el-table-column>

            <el-table-column
              prop="operate"
              label="操作"
              show-overflow-tooltip align="center">
              <template slot-scope="scope">
          <el-button style="color: #fff;background-color:rgba(0, 125, 113,.5);border:1px solid #007d71;margin-left: 0;" size="mini" plain
          @click="editRow(scope.row)">
          编辑
        </el-button>
        <!-- 编辑部门 -->
        <el-dialog  :visible.sync="editRowVisible" width="440px ">
              <div style="margin-right: 60px;">
                <el-form :model="form_edit" >
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                  
                  <el-input v-model="form_edit.title" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="父级部门" :label-width="formLabelWidth">
                  <el-popover placement="bottom-start" width="400" trigger="click">
                    <el-tree :data="data" :props="deptProps" accordion @node-click="handleNodeDeptPid">
                    </el-tree>
                    <el-button slot="reference" icon="el-icon-arrow-down">{{ deptName }} </el-button>
                  </el-popover>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-input v-model="form_edit.sort" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="form_edit.remark"
                    >
                  </el-input>
                </el-form-item>
              </el-form>
              </div>

              <div slot="footer" class="dialog-footer">
                <el-button @click="editRowVisible = false">关闭</el-button>
                <el-button type="primary" @click="editDept">保存</el-button>
              </div>
            </el-dialog>
        <el-button type="success" size="mini"  plain 
          @click="detailRow(scope.row)"> 
          详细
        </el-button>

        
        <el-button type="danger" size="mini" style="margin-left: 0;" plain :disabled="scope.row.status==3"
          @click.native.prevent="deleteRow(scope.row)" >
          删除
        </el-button>
        
        </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="condition.page"
            :page-sizes="[5, 10, 15, 20]" :page-size="condition.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="deptTotal">
          </el-pagination>
        </el-row>
      </div>
    </el-col>

  </el-row>
        <!-- 详细页 -->
        <el-dialog  :visible.sync="detailRowVisible">
          <el-descriptions title="基本信息" border :column="2">
            <el-descriptions-item label="主键ID">{{deptDetail.id}}</el-descriptions-item>
            <el-descriptions-item label="部门名称">{{ deptDetail.title }}</el-descriptions-item>
            <el-descriptions-item label="父级编号">{{ deptDetail.pid }}</el-descriptions-item>
            <el-descriptions-item label="父级名称">{{ deptDetail.parentName }}</el-descriptions-item>
            <el-descriptions-item label="排序">{{ deptDetail.sort }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ deptDetail.createDate }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ deptDetail.updateDate }}</el-descriptions-item>
            <el-descriptions-item label="创建者">{{ deptDetail.createName}}</el-descriptions-item>
            <el-descriptions-item label="更新者">{{ deptDetail.updateName}}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ deptDetail.remark || "无"}}</el-descriptions-item>
          </el-descriptions>
        </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false, //添加
      detailRowVisible: false, //详情页
      editRowVisible: false, //编辑页
      //添加部门的表单
      form: {
        title: '',
        pid: 0,
        sort: '',
        remark: '',
        status: '1',
        remark:"暂无描述"
      },
      //表单备份
      formBak: {
        title: '',
        pid: 0,
        sort: '',
        remark: '',
        status: '1',
        remark:"暂无描述"
      },
      deptProps: {
        label: "title",
        children: "children"
      },
      deptName:"选则部门",
      //部门编辑
      form_edit: {
        id:'',
        title: '',
        pid: '',
        sort: '',
        remark:'',
      },
      //部门详细页
      deptDetail: {
        id:'',
        createBy: '',
        pid: '',
        remark: '',
        sort: '',
        status: '',
        title: '',
        updateBy:''
      },
      //条件查询
      condition: {
        deptTitle: '',
        page: '1',
        pageSize: '5',
        status: '',
      
      },
      deptTotal:0,
      //部门树
      data:[],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      options: [{
        value: '',
        label:'全部'
      },
        {
        value: '1',
        label: '正常'
      }, {
        value: '2',
        label: '冻结'
        }
        , {
        value: '3',
        label: '删除'
        }],
      //部门相关信息
      tableData1: [],  //所有部门
      multipleSelection: [],
      status_value: '',
      bm_input:'',
    };
      
    },
  methods: {
    handleSizeChange(size) {
      this.condition.pageSize = size;
      this.search();
    },
    handleCurrentChange(current) {
      this.condition.page = current;
      this.search();
    },
    showAddDept() {
      this.form = this.formBak;
      this.dialogFormVisible = true;
    },
    closeAddDept() {
      this.deptName = "选择部门";
      this.form = this.formBak;
      this.dialogFormVisible = false;
    },
    handleNodeDeptPid(data) {
      this.deptName = data.title;
      this.form.pid = data.id;
      this.form_edit.pid = data.id;
    },
    async search_all() {
      const { data: result } = await this.$http.get("dept/getByCondition",{params:this.condition});
      if (result.success) {
        // console.log(result.data);
        this.tableData1 = result.data.records;
        this.deptTotal = result.data.total;
      }
      },
    //部门搜索
    async search_tree() { 
        // console.log(this.status_value,this.bm_input)
      const { data: result } = await this.$http.get("dept/tree");
      // console.log(result.data)
      if (result.success) { 
        this.data = result.data;
      }
      },
      //条件查询
      async search() { 
        // console.log(1)
        this.condition.deptTitle = this.bm_input;
        this.condition.status = this.status_value;
        const { data: result } = await this.$http.get("dept/getByCondition" ,{ params: this.condition });
        // console.log(2)
        // console.log(this.condition)

        console.log(result.data.records)
        this.tableData1 = result.data.records;
        this.deptTotal = result.data.total;
    },
    resetDeptName() {
      this.deptName = "选择部门";
    },

    //添加部门
    async addDept() { 
      // console.log(this.form)
      // this.form.createDate = this.currentTime();
      // console.log(this.form)
      // 重置deptName
      this.resetDeptName();
      const { data: result } = await this.$http.post("dept", this.form);
      // console.log(result.data)
      if (result.success) {
        this.$message({
        message: '添加成功',
        type: 'success'
        });
        this.search_all();
        this.search_tree();
        
      } else { 
        this.$message.error('添加失败');
      }
      this.closeAddDept();
    },
    //删除操作
    async deleteRow(tableData1) { 
      // console.log(tableData1.id)
      const { data: result } = await this.$http.delete("dept",{ params: { id: tableData1.id} });
      // console.log(result)
      if (result.success) {
        this.$message({
        message: '删除成功',
        type: 'success'
        });
        this.search_all();
      } else { 
        this.$message.error('删除失败');
      }
    },
    // 详细操作
    detailRow(dept) { 
      this.detailRowVisible = true;
      this.deptDetail = dept
      // console.log(dept)
    },
    //编辑操作
    editRow(dept) { 
      this.editRowVisible = true;
      this.form_edit.title = dept.title;
      this.form_edit.pid = dept.pid;
      this.form_edit.sort = dept.sort;
      this.form_edit.remark = dept.remark;
      this.form_edit.id = dept.id;
    },
    async editDept() { 
      const { data: result } = await this.$http.put("dept/updateDept", this.form_edit);
      // console.log(this.form_edit)
      // console.log(result)
      if (result.data) {
        this.$message({
          message: '修改成功',
          type: 'success',
          center: true
        });
        this.editRowVisible = false;
        this.search_all();
      } else { 
        this.$message({
          message: '修改失败',
          type: 'error',
          center: true
        });
      }
    },
    //操作时没选择记录会提示
    tips() { 
      if (this.multipleSelection == 0) {
        this.$message({
          type: 'warning',
          message: '请选择一条记录',
          offset: '350',
          center: true           
        });
        return 0;
      }
      return 1;
    },
    //多选启用
    enables() { 
      if (this.tips() == 1) {
        const enables_list1 = [];
        let num = 0;
        for (num; num < this.multipleSelection.length; num++) {
          enables_list1.push(this.multipleSelection[num].id);
        }
        // console.log(enables_list)
        this.$http.get("dept/operate_active/" + enables_list1);
        window.location.reload();
      }
    },
    //冻结
    freezes() { 
      if (this.tips() == 1) {
        const enables_list2 = [];
        let num = 0;
        for (num; num < this.multipleSelection.length; num++) {
          enables_list2.push(this.multipleSelection[num].id);
        }
        // console.log(enables_list)
        this.$http.get("dept/operate_freeze/" + enables_list2);
        window.location.reload();
      }
    },
    //删除
    deletes() { 
      if (this.tips() == 1) {
        const enables_list3 = [];
        let num = 0;
        for (num; num < this.multipleSelection.length; num++) {
          enables_list3.push(this.multipleSelection[num].id);
        }
        // console.log(enables_list)
        this.$http.get("dept/operate_delete/" + enables_list3);
        window.location.reload();
      }
    },
    handleNodeClick(data) {
      // console.log(data);
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection)
    }
  }, mounted() { 
    this.search_all();
    this.search_tree();
  }
}
</script>

<style>
.nav {
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(222, 226, 230);
}
.border {
  border: 1px solid rgb(225, 15, 204);
}
.grid-content {
  margin-top: 20px;
  border: 1px solid rgb(222, 226, 230);
  /* padding-bottom: 100px; */
  /* background-color: #15d59b; */
}
/* .left {
  padding-bottom: 40px;
} */
.bm1 {
  padding: 10px;
  font-size: 14px;
  border-bottom: 1px solid rgb(222, 226, 230);
}
.tree {
  padding-bottom: 20px;
}
.right{
  margin-top: 20px;
  border: 1px solid rgb(222, 226, 230);
  /* padding-bottom: 20px; */
  flex-direction: column;
}
.bm_status1 {
  float: left;
  border: 1px solid rgb(0, 150, 136);
  padding: 7px;
  font-size: 14px;
  font-weight:bold;
  color: rgb(0, 150, 136);
}
.name {
  margin-left: 10px;
  float: left;
}
</style>